<template>
    <div class="container">
        
        <div style="display: flex;gap: 60px;">
            <div>
                <h3>条码管理</h3>
                <el-form ref="form" label-width="120px" style="margin-top:20px;">
            <el-form-item  v-for="(item,index) in codeList" :key="index" :label="item.name+':'">
                <el-input v-model="item.value" placeholder="请输入内容" style="width:200px;"></el-input> <el-button type="danger" @click="deletCode(index)" style="margin-left: 20px;">删除</el-button>
            </el-form-item> 
            </el-form>
            <el-button type="primary" @click="sumBit">提交</el-button>
            </div>
            <div style="width: 50%;">
                <h3>条码预览</h3>
                 <img style="display: block;width: 100%;" src="@/assets/img/codeImg1.png" alt="">
                 <div style="display: flex;gap: 40px;margin-left: 60px;"><span  v-for="(item,index) in codeList" :key="index" >{{ item.value }}</span></div>
                 <el-divider></el-divider>
                 <div style="display: flex;gap: 40px;margin-left: 60px;"><span  v-for="(item,index) in codeList" :key="index" >{{ item.name }}</span></div>
            </div>
        </div>
       
        
    </div>
</template>
<script>
  import {getcodeMsg,code_save} from "@/request/api";
  export default{
    data(){
        return{
                codeList:{},
                oldData:{}
        }
    },
    mounted(){
             this.getMsg()
    },
    methods:{
       async getMsg(){
         let res =  await getcodeMsg("")
         this.oldData = JSON.parse(JSON.stringify(res.data)) 
         this.codeList = JSON.parse(res.data.barCodeContent)
         console.log(res.data)
        },
        //删除
        deletCode(i){
            this.codeList.splice(i, 1)
        },
        //提交
       sumBit(){
        this.$confirm('此操作将永久更改该条码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
            this.oldData.barCodeContent = JSON.stringify(this.codeList)
            // console.log(this.oldData)
            let res = await code_save(this.oldData)
            // console.log(res)
            this.$message({
                message: '修改成功！',
                type: 'success'
                });
        }).catch(() => {
         
        });
            
                }
    }
  }
</script>
<style scoped>
.container{
    min-height:65%;
}
.delete_btn{
    margin-left:6px;
}
</style>